<template>
    <div class="views" :key="key">
        <div class="header">
            <button @click="addView">添加视角</button>
            <button @click="clearAllViews">清空全部视角</button>
        </div>
        <div class="content">
            <div v-for="(item, index) in viewCollection.views" :key="index">
                <img :class="{ 'focus': currentIndex === index }" @click="flyToView(index)" :src="item.thumbnail"
                    alt="">
                <input type="text" :value="item.name" @blur="resetViewName(index, $event)">
                <span class="close" @click="deleteView(index)">❎</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { ESCameraViewCollection } from 'earthsdk3';

// Define props
const props = defineProps<{
    viewCollection: ESCameraViewCollection
}>()

// Reactive state
const key = ref<number>(0)
const currentIndex = ref<number>(-1)

onBeforeMount(() => {
    // Event listeners
    props.viewCollection.viewsChanged.don(() => {
        key.value += 1
    })

    props.viewCollection.currentViewIndexChanged.don((val: number) => {
        currentIndex.value = val
    })
})

// Methods
const addView = (): void => {
    props.viewCollection.addView()
}

const flyToView = (index: number): void => {
    props.viewCollection.flyToView(index)
    props.viewCollection.setCurrentView(index)
}

const resetViewName = (index: number, event: Event): void => {
    const target = event.target as HTMLInputElement
    props.viewCollection.resetViewName(index, target.value)
}

const clearAllViews = (): void => {
    props.viewCollection.clearAllViews()
}

const deleteView = (index: number): void => {
    props.viewCollection.deleteView(index)
}
</script>

<style scoped>
.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    min-height: 500px;
    max-height: 700px;
    overflow-y: auto;
}

.content>div {
    width: 64px;
    height: 89px;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-right: 8px;
    margin-bottom: 10px;
}

.content>div input {
    text-indent: 0px;
    background: none;
    border: none;
    color: #fff;
    text-align: center;
}

.content>div p {
    padding: 0px;
    text-align: center;
    margin: 0px;
}

.close {
    position: absolute;
    cursor: pointer;
    right: 0px;
    top: 0px;
}

.focus {
    border: 1px solid #00FFFF;
}
</style>